import React, { Fragment, memo ,useEffect } from "react";
import { useDispatch,useSelector,shallowEqual } from "react-redux";
import WYThemeHeaderRCM from "components/theme-header-rcm";
import "./index.scss";

import actions from "store/action/recommend";

import WYSongsCover from "components/songs-cover";

const WYHotRecommend = memo(function (props) {

  // redux 
    const dispatch = useDispatch()
    const hotRecommendAry = useSelector(state=>(state.getIn(['recommend','hotRecommends'])),shallowEqual)
  // 
  useEffect(() => {
    dispatch(actions.getHotRecommends())
  }, [dispatch])


  return (
    <Fragment>
      {/* 热门推荐nav */}
      <WYThemeHeaderRCM
        title="热门推荐"
        keywords={["华语", "流行", "摇滚", "民谣", "电子"]}
      />
      {/* 内容 */}
      <div className="hot-recommend">
        {hotRecommendAry.map((item,index)=> <WYSongsCover key={index} info={item}/>)}
      </div>
    </Fragment>
  );
});

export default WYHotRecommend;
